<template>
       <div>
        <div class="rightTop">
            IC卡|插卡拔卡记录
        </div>
        <div class="rightMiddle">
              <div class="date">
                <div class="dateText">时间段 : </div>
                <div class="datePicker">
                    <el-date-picker
                        v-model="PDate"
                        type="daterange"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        format="YYYY-MM-DD" 
                        value-format="YYYY-MM-DD"
                        style="width: 14vw;"
                        @change="getDate"
                    />
                </div>
              </div>
              <div class="mobile">
                 <div class="mobileText"> 设备号：</div>
                 <div class="mobileInput"><el-input v-model="clientId" placeholder="请输入设备号" clearable /></div>
                 <div class="mobileText"> 驾驶员姓名：</div>
                 <div class="mobileInput"><el-input v-model="driverName" placeholder="请输入驾驶员姓名" clearable /></div>
              </div>
              <div class="select">
                  <el-button type="primary" @click="getClientId">查询</el-button>
              </div>
              
        </div>
         <div class="rightBottom"> 
          <div style="background: linear-gradient(90deg,#00BAFF 0%,#8feece 100%);height:3vh;color: #fff;line-height: 3vh;margin-top: 10px;">
              总计{{total}}条
          </div>
          <el-table :data="tableData"  border highlight-current-row >
                    <el-table-column prop="No" label="序号" width="80" align="center"/>
                    <el-table-column prop="mobileNo" label="设备号" width="150" align="center"/>
                    <el-table-column prop="driverName" label="驾驶员姓名" width="150" align="center"/>
                    <el-table-column prop="issuingName" label="发证机构名称" width="150" align="center"/>
                    <el-table-column prop="qualificationCode" label="从业资格证编码" width="200" align="center"/>
                    <el-table-column prop="certificateValidity" label="证件有效期" width="200" align="center"/>
                    <el-table-column prop="insertCardTime" label="插卡时间" width="175" align="center"/>
                    <el-table-column prop="outCardTime" label="拔卡时间" width="180" align="center"/>
                    <el-table-column prop="readingResult" label="读卡结果" width="192" align="center"/>          
          </el-table>
          <div class="pagination">
                      <el-pagination
                        v-model:current-page="currentPage"
                        v-model:page-size="pageSize"
                        layout="sizes, prev, pager, next"
                        :page-sizes="[8, 10, 15,17]"
                        :total="total"
                        :background="isBackground"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        next-text="下一页" prev-text="上一页"
                      />
          </div>
       </div>
      </div>
</template>

<script>
import api from "@/api/api";
import  ElNotification  from 'element-plus';
export default {
  components: {ElNotification},
  name: 'HelloWorld',
  props: {},
  data: function () {
      return {
        PDate:[],
        //设备号
        clientId:"",
        //驾驶员姓名
        driverName:"",
        //表格数据
        tableData:[],
        //每页显示条数
        pageSize: 15,
        //当前页数
        currentPage:1,
        total: 0,
        isBackground:true
     }
    },
      mounted() {
          this.getNowDate();
          this.getIcCard();
      },
      methods: {
      //获取当前日期yy-mm-dd
      getNowDate() {
            const timeOne = new Date()
            const year = timeOne.getFullYear()
            let month = timeOne.getMonth() + 1
            let day = timeOne.getDate()
            month = month < 10 ? '0' + month : month
            day = day < 10 ? '0' + day : day
            this.PDate = [`${year}-${month}-${day}`,`${year}-${month}-${day}`];
      },
      //点击查询
      getClientId(){
        api.selectIcCard(this.clientId,this.PDate[0],this.PDate[1],this.driverName,this.currentPage,this.pageSize*this.currentPage)
                .then(res=>{
                  if(res.code==0){
                    this.total=res.data.total;
                    this.getTable(res.data.records);
                  }
                })
      },
      //时间改变
      getDate(val) {
           this.PDate=val;
      },
      getIcCard(){
                api.selectIcCard(this.clientId,this.PDate[0],this.PDate[1],this.driverName,this.currentPage,this.pageSize)
                .then(res=>{
                  if(res.code==0){
                    this.total=res.data.total;
                    this.getTable(res.data.records);
                  }
                })
      },
   

      formattedDate(dateStr) {
      const year = dateStr.substring(0, 4);
      const month = dateStr.substring(4, 6);
      const day = dateStr.substring(6, 8);
      const hours = dateStr.substring(8, 10);
      const minutes = dateStr.substring(10, 12);
      const seconds = dateStr.substring(12, 14);
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    
      getTable(val){ 
        console.log(val)
        this.tableData = val.map((item,index) => {
          switch (item.readingResult) {
            case 0:
            item.readingResult = "读卡成功";
              break;
            default:
            item.readingResult = "读卡失败";
          }
          if (item.insertCardTime!=undefined) {
            item.insertCardTime=this.formattedDate("20"+item.insertCardTime)
          }
          if(item.outCardTime!=undefined){
            item.outCardTime=this.formattedDate("20"+item.outCardTime)
          }
         
              return {
                No: this.pageSize*(this.currentPage-1)+index + 1,
                   ...item,
                };
  
      });
     
  
      },
      handleSizeChange(val){
         this.pageSize=val;
         this.getIcCard();
      },
      handleCurrentChange(val){
        this.currentPage=val;
        this.getIcCard();
      }
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>


.rightTop{
  border-bottom: 1px solid #fff ;
  height: 4vh;
  width: 100%;
  line-height: 4vh;
  box-shadow: 0 0 4px #ddd;
  padding-left: 1vw;


}
.rightMiddle{
  margin-top: 1vh;
  border-bottom: 1px solid #fff ;
  height: 5vh;
  width: 100%;
  line-height: 5vh;
  box-shadow: 0 0 4px #ddd;
  padding-left: 1vw;

 
}
.rightBottom{

  height: 77vh;
  width: 87%;
  padding-left: 5vw;
}
.pagination{
  float: left;
  margin-left: 30vw;
  margin-top: 1vh;
}
.date{
  float: left;
}
.dateText{
  float: left;
}
.datePicker{
  float: left;
  margin-top: 3px;
}
.mobile{
  float: left;
 
}
.mobileText{
  float: left;
  margin-left: 2vw;
}
.mobileInput{
  float: left;
}
.select{
  float: left;
  margin-left: 2vw;
}


:deep(.el-pagination.is-background .btn-prev){
  background: #ffffff !important; 
  border: 1px solid #f4f4f5;
  width: 70px;
  box-shadow: 0 0 1px #ddd;
}

:deep( .el-pagination.is-background .btn-next){
   background: #ffffff !important; 
   border: 1px solid #f4f4f5;
   width: 70px;
   box-shadow: 0 0 1px #ddd;
}



:deep(.el-pagination.is-background .btn-prev, ::v-deep .el-pagination.is-background .btn-next,::v-deep .el-pagination.is-background .el-pager li){
   
     margin:0;
}
</style>
